import { css } from "@emotion/css";
import p1 from "../assets/1.jpg";
import p2 from "../assets/2.jpg";
import p3 from "../assets/3.jpg";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { Button } from "antd";
import { useCallback } from "react";

export default () => {
    const exportPdf = useCallback(() => {
        // 获取HTML元素
        const element = document.getElementById("layout-wrapper");
        const options = {
            scale: 4, //scale属性的值为2，表示图像的缩放比例。
        };
        // 将元素转换为canvas对象
        html2canvas(element, options).then((canvas) => {
            // 未生成pdf的html页面高度
            var leftHeight = canvas.height;

            var a4Width = 595.28;
            var a4Height = 841.89; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
            // 一页pdf显示html页面生成的canvas高度;
            var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);

            // pdf页面偏移
            var position = 0;

            var pageData = canvas.toDataURL("image/jpeg", 1.0);

            var pdf = new jsPDF("p", "pt", "a4"); // A4纸，纵向
            var pdf2 = new jsPDF("p", "pt", "a4"); // A4纸，纵向

            // var index = 1
            var canvas1 = document.createElement("canvas");
            var height;
            pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
            pdf2.setDisplayMode("fullwidth", "continuous", "FullScreen");

            var pdfName = name;

            // eslint-disable-next-line no-irregular-whitespace
            function createImpl(canvas) {
                // 获取第一个文件总页数
                let targetPage = pdf.internal.getNumberOfPages();
                if (leftHeight > 0) {
                    // index++
                    var checkCount = 0;
                    if (leftHeight > a4HeightRef) {
                        var i = position + a4HeightRef;
                        for (i = position + a4HeightRef; i >= position; i--) {
                            var isWrite = true;
                            for (var j = 0; j < canvas.width; j++) {
                                var c = canvas
                                    .getContext("2d")
                                    .getImageData(j, i, 1, 1).data;
                                if (
                                    c[0] !== 0xff ||
                                    c[1] !== 0xff ||
                                    c[2] !== 0xff
                                ) {
                                    isWrite = false;
                                    break;
                                }
                            }
                            if (isWrite) {
                                checkCount++;
                                if (checkCount >= 10) {
                                    break;
                                }
                            } else {
                                checkCount = 0;
                            }
                        }
                        height =
                            Math.round(i - position) ||
                            Math.min(leftHeight, a4HeightRef);
                        if (height <= 0) {
                            height = a4HeightRef;
                        }
                    } else {
                        height = leftHeight;
                    }
                    canvas1.width = canvas.width;
                    canvas1.height = height;
                    var ctx = canvas1.getContext("2d");
                    ctx.drawImage(
                        canvas,
                        0,
                        position,
                        canvas.width,
                        height,
                        0,
                        0,
                        canvas.width,
                        height
                    );
                    // eslint-disable-next-line no-unused-vars
                    var pageHeight = Math.round(
                        (a4Width / canvas.width) * height
                    );
                    // pdf.setPageSize(null, pageHeight)
                    if (position !== 0 && targetPage < 30) {
                        pdf.addPage();
                    } else if (position !== 0) {
                        // 超过30页，图片添加到第二个文件
                        pdf2.addPage();
                    }
                    if (targetPage < 30) {
                        pdf.addImage(
                            canvas1.toDataURL("image/jpeg", 1.0),
                            "JPEG",
                            10,
                            10,
                            a4Width - 20,
                            (a4Width / canvas1.width) * height - 20
                        );
                    } else {
                        // 超过30页，图片添加到第二个文件
                        pdf2.addImage(
                            canvas1.toDataURL("image/jpeg", 1.0),
                            "JPEG",
                            10,
                            10,
                            a4Width - 20,
                            (a4Width / canvas1.width) * height - 20
                        );
                    }
                    leftHeight -= height;
                    position += height;
                    if (leftHeight > 0) {
                        setTimeout(createImpl, 500, canvas);
                    } else {
                        // 获取第二个文件总页数
                        let targetPage2 = pdf2.internal.getNumberOfPages(); // 获取总页
                        if (targetPage2 > 1) {
                            // 第二个文件有内容时，一起导出
                            pdf2.deletePage(1); // 删除第一张空白页
                            pdf2.save(pdfName + ".pdf");
                        }
                        pdf.save(pdfName + ".pdf");
                    }
                }
            }

            // 当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < a4HeightRef) {
                pdf.addImage(
                    pageData,
                    "JPEG",
                    10,
                    10,
                    a4Width - 20,
                    (a4Width / canvas.width) * leftHeight - 20
                );
                pdf.save(pdfName + ".pdf");
            } else {
                try {
                    pdf2.deletePage(0);
                    pdf.deletePage(0);
                    setTimeout(createImpl, 500, canvas);
                } catch (err) {}
            }
        });
    }, []);
    return (
        <>
            <div
                id="layout-wrapper"
                className={css`
                    width: 960px;
                    margin: 0 auto;
                    padding: 40px 60px 20px;
                    font-family: NSimSun;
                `}
            >
                <div
                    className={css`
                        width: 680px;
                        margin: 0 auto;
                    `}
                >
                    <h3
                        className={css`
                            text-align: center;
                            font-weight: 600;
                            font-size: 20px;
                        `}
                    >
                        我的家
                    </h3>
                    <h5
                        className={css`
                            text-align: right;
                            padding-right: 160px;
                            font-size: 20px;
                            font-weight: 600;
                        `}
                    >
                        姓名：
                    </h5>
                    <p
                        className={css`
                            text-indent: 2em;
                            font-size: 16px;
                            line-height: 2;
                        `}
                    >
                        爸爸妈妈们，下周起我们将和孩子们一起进入“办家家”的主题活动。请和孩子一起观察自己家的格局，说说不同房间里的物品及功能，并拍摄照片贴在下面哟！（可以做备注哦！）
                    </p>
                </div>

                <div
                    className={css`
                        display: flex;
                        justify-content: space-between;
                        padding: 16px 0 0;
                    `}
                >
                    <div
                        className={css`
                            width: 49%;
                            aspect-ratio: 16 / 12;
                            overflow: hidden;
                            position: relative;
                            padding: 12px;
                            border-radius: "5px";
                        `}
                    >
                        <div
                            className={css`
                                background-image: url(${p1});
                                width: 100%;
                                height: 100%;
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: center center;
                            `}
                        ></div>
                    </div>
                    <div
                        className={css`
                            width: 49%;
                            aspect-ratio: 16 / 12;
                            overflow: hidden;
                            position: relative;
                            padding: 12px;
                            border-radius: "5px";
                        `}
                    >
                        <div
                            className={css`
                                height: 100%;
                                border: 1px solid black;
                            `}
                        />
                    </div>
                </div>

                <div
                    className={css`
                        display: flex;
                        justify-content: space-between;
                        padding: 16px 0 0;
                    `}
                >
                    <div
                        className={css`
                            width: 49%;
                            aspect-ratio: 16 / 12;
                            overflow: hidden;
                            position: relative;
                            padding: 12px;
                            border-radius: "5px";
                        `}
                    >
                        <div
                            className={css`
                                height: 100%;
                                border: 1px solid black;
                            `}
                        />
                    </div>
                    <div
                        className={css`
                            width: 49%;
                            aspect-ratio: 16 / 12;
                            overflow: hidden;
                            position: relative;
                            padding: 12px;
                            border-radius: "5px";
                        `}
                    >
                        <div
                            className={css`
                                background-image: url(${p2});
                                width: 100%;
                                height: 100%;
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: center center;
                            `}
                        ></div>
                    </div>
                </div>

                <div
                    className={css`
                        display: flex;
                        justify-content: space-between;
                        padding: 16px 0 0;
                    `}
                >
                    <div
                        className={css`
                            width: 49%;
                            aspect-ratio: 16 / 12;
                            overflow: hidden;
                            position: relative;
                            padding: 12px;
                            border-radius: "5px";
                        `}
                    >
                        <div
                            className={css`
                                background-image: url(${p3});
                                width: 100%;
                                height: 100%;
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: center center;
                            `}
                        ></div>
                    </div>
                    <div
                        className={css`
                            width: 49%;
                            aspect-ratio: 16 / 12;
                            overflow: hidden;
                            position: relative;
                            padding: 12px;
                            border-radius: "5px";
                        `}
                    >
                        <div
                            className={css`
                                height: 100%;
                                border: 1px solid black;
                            `}
                        />
                    </div>
                </div>
            </div>

            <Button
                type="primary"
                onClick={exportPdf}
                style={{ position: "fixed", top: "100px", right: "40px" }}
            >
                导出
            </Button>
        </>
    );
};
